<template>
  <view class="service-categories">
    <view 
      v-for="(category, index) in categories" 
      :key="index" 
      class="service-category"
      @click="onCategoryClick(category, index)"
    >
      <view class="service-category__icon">{{ category.icon }}</view>
      <view class="service-category__name">{{ category.name }}</view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  categories: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['click']);

const onCategoryClick = (category, index) => {
  emit('click', { category, index });
};
</script>

<style lang="scss" scoped>
.service-categories {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  margin: 0 10px 10px;
}

.service-category {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  
  &__icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #f0f9eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 5px;
  }
  
  &__name {
    font-size: 12px;
    color: #333;
  }
}
</style>
